<template>
  <el-button @click="goPage('/user/profile')">返回</el-button>
  <el-form
      ref="ruleForm"
      :model="editForm"
      :rules="rules"
      label-width="80px"
      class="demo-ruleForm"
  >
    <el-form-item label="用户名" prop="username">
      <el-input v-model="editForm.username" disabled></el-input>
    </el-form-item>
    <el-form-item label="氏族" prop="team">
      <el-select v-model="editForm.team" placeholder="氏族">
        <el-option label="一团" value="一团"></el-option>
        <el-option label="二团" value="二团"></el-option>
        <el-option label="三团" value="三团"></el-option>
        <el-option label="四团" value="四团"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="游戏ID" prop="nickname">
      <el-input  v-model="editForm.nickname"></el-input>
    </el-form-item>
    <el-form-item label="QQ" prop="qq">
      <el-input v-model="editForm.qq" v-if="info.isBindQq" disabled>绑定后不可更改</el-input>
      <el-input v-model="editForm.qq" v-else></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-radio-group v-model="editForm.sex">
        <el-radio label="男" value="男"></el-radio>
        <el-radio label="女" value="女"></el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')"
      >Create</el-button
      >
      <el-button @click="resetForm('ruleForm')">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {reactive, toRefs} from "@vue/reactivity";
import {useStore} from "vuex";
import {ref} from "vue";
import {onMounted} from "@vue/runtime-core";
import {useRouter} from "vue-router";
import {POST} from "../../utils/Request";
import {Error, Success} from "../../utils/notify";


export default {
  name: "editProfile",
  setup(){
    const router = useRouter()
    const store = useStore()
    const state = reactive({
      info:store.getters['user/userInfo'],
      editForm:{
        username: '',
        team: '',
        sex:ref('男'),
        nickname: '',
        qq:''
      },
      rules:{
        team:[{
          required:true,
          message:"请选择所在氏族",
          trigger:'change'
        }],
        nickname: [{
          required:true,
          message:"请输入游戏ID",
          trigger:'blur'
        },{
          min:3,
          max:25,
          message: "请输入3~25个字符",
          trigger: 'blur'
        }],
        qq:[{
          required:true,
          message:"请输入您的QQ",
          trigger:'blur'
        },{
          min:5,
          max:15,
          message: "请输入正确的QQ号码",
          trigger: 'blur'
        }],
        sex:[{
          required:true,
          message:"请选择您的性别",
          trigger:'change'
        }]
      }
    })
    onMounted(()=>{
      methods.reset()
    })
    const methods = {
      submitForm(formName){
        this.$refs[formName].validate((valid)=>{
          if (valid) {
            this.editProfile()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
        this.reset()
      },
      async editProfile(){
        let resp = await POST('/user/editProfile',state.editForm);
        if (resp.code === 1){
          Success(resp.msg)
          store.dispatch('user/getUserInfo')
        }else {
          Error(resp.msg)
        }
      },
      reset(){
        let info = state.info
        state.editForm = {
          username: info.username,
          team: info.team,
          sex:ref(info.sex),
          qq:info.qq,
          nickname: info.nickname
        }
      },
      goPage(url){
        router.push(url)
      }
    }
    return {
      ...toRefs(state),
      ...methods,
    }
  }
}
</script>

<style scoped>

</style>